<template>
	<view class="page">
		<fu-custom bgColor="" :isBack="true">
			<block slot="content">商城</block>
		</fu-custom>
		<!-- 头部 start -->
		<view class="cu-custom" style="height: 128rpx;">
			<view class="cu-bar fixed"
				style="height: 128rpx;z-index: 9;padding: 0;"
				:style="[{ top: CustomBar + 'px' }]">
				<view class="search-form round">
					<text class="cuIcon-search text-bf"></text>
					<input class="text-666 fu-fs24" confirm-type="search" type="text" v-model="keyword" :focus="true"
						:adjust-position="false" :hold-keyboard="false" :placeholder="placeholder"
						placeholder-class="text-bf" @input="handleInput" @confirm="handleSearch" />
					<text v-if="keyword.length != 0" class="cuIcon-close text-666 padding-right-xs"
						@click="clear"></text>
				</view>
			</view>
		</view>
		<!-- 头部 end -->

		<!-- 历史,热搜 start -->
		<view v-if="words == 0" class="padding-sm">
			<!-- 搜索历史 -->
			<view>
				<view class="padding-bottom-sm flex justify-between align-center">
					<view class="text-lg text-bold text-333 flex align-center">
						<text class="text-lg text-333 text-bold margin-left-xs">历史搜索</text>
					</view>
					<view><text v-if="history_list.length != 0" class="cuIcon-delete text-666 text-lg"
							@click="clearHistory"></text></view>
				</view>
				<view class="flex flex-wrap" v-if="history_list.length != 0">
					<block v-for="(item, index) in history_list" :key="index">
						<view
							class="history-tag bg-f8 text-333 fu-fs24 round margin-right-sm margin-bottom-sm padding-lr-lg padding-tb-xs"
							@click="handleSearch($event, item,index)" @longpress="handleLongpress(index)">
							{{ item }}
							<text v-if="index == removeIndex" class="close cuIcon-close"></text>
						</view>
					</block>
				</view>
				<view v-else class="text-666 text-sm margin-bottom-xl margin-top-xs">暂无历史记录</view>
			</view>
			<!-- 搜索发现 -->
			<view>
				<view class="text-lg text-333 flex align-center justify-between margin-bottom-sm">
					<view class="text-lg text-bold text-333 flex align-center">
						<text class="text-lg text-333 text-bold margin-left-xs">搜索发现</text>
					</view>
					<!-- <view
						class="fu-fs24 text-333 flex align-center justify-center width-104 height-48 line-height-48 text-center solid "
						@click="changeSweetGril" style="border-radius: 12rpx;">
						换一批
					</view> -->
				</view>
				<view class="flex flex-wrap">
					<block v-for="(item, index) in search_found" :key="index">
						<view
							class="history-tag fu-fs24 round margin-right-sm margin-bottom-sm  padding-lr-lg padding-tb-xs bg-f8 text-333"
							v-if="index < 10"
							@click="toClassify(item.name)">
							<view class="text-cut">{{ item.name }}</view>
							<image class="fu-search-pic" v-if="index < 2" :src="imgBaseUrl + 'index/find-flash.png'" mode="aspectFit" />
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 历史,热搜 end -->

		<!-- 分词搜索 start-->
		<scroll-view v-if="words != 0" class="bg-white" :style="{ height: 'calc(100% - ' + CustomBar + 'px)' }">
			<view class="padding-lr">
				<block v-for="(item, index) in words" :key="index">
					<view class="solid-bottom padding-tb flex align-center justify-between" @click="toDetail(item)">
						<view class="text-df text-333 text-cut">{{ item.name }}</view>
						<view class="cuIcon-right text-333 margin-left" style="font-size: 20rpx;"></view>
					</view>
				</block>
			</view>
		</scroll-view>
		<!-- 分词搜索 end-->

		<!-- 底部语音按钮 -->
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<!-- <view v-if="keyboardheight > 0" class="bottom-fixed" :style="{ bottom: keyboardheight + 'px' }">
			<view class="action-button animation-scale-up" @click="openVoicePop">
				<text class="cuIcon-voicefill text-333"></text>
				点击说出你想要的商品
			</view>
		</view> -->
		<!-- #endif -->

		<!-- 语音弹窗 -->
		<!-- <uni-popup ref="voice" type="bottom" :maskClick="true">
			<view>
				<view class="flex justify-end"><text class="cuIcon-close text-666" @click="closeVoicePop"></text>
				</view>
				<view class="text-center text-xl margin-top-sm" v-if="listenerType == 'listener'">请说, 我在聆听...</view>
				<view class="text-center text-xl margin-top-sm text-theme" v-else-if="listenerType == 'fail'">
					未能识别,请点击麦克风重试</view>
				<view class="text-center text-xl margin-top-sm" v-else-if="listenerType == 'success'">{{ listenerWord }}
				</view>

				<view class="text-center text-sm margin-top" style="padding: 0 100rpx;">
					<text class="margin-right-xs">你可以试试这样说:</text>
					<text class="text-999">新款限定口红,脚裸款超长羽绒服,高颜值零食</text>
				</view>
				<view class="flex justify-center align-center" style="height: 200rpx;">
					<view v-if="listenerType == 'listener'">
						<view class="flex align-center">
							<span class="lines">
								<hr class="hr hr1" />
								<hr class="hr hr2" />
								<hr class="hr hr3" />
								<hr class="hr hr4" />
								<hr class="hr hr5" />
								<hr class="hr hr6" />
								<hr class="hr hr7" />
								<hr class="hr hr8" />
								<hr class="hr hr9" />
								<hr class="hr hr10" />
								<hr class="hr hr11" />
								<hr class="hr hr12" />
								<hr class="hr hr13" />
								<hr class="hr hr14" />
								<hr class="hr hr15" />
							</span>
						</view>
					</view>
					<view class="action-button" v-if="listenerType == 'fail'" @click="openVoicePop"><text
							class="cuIcon-voicefill text-theme" style="font-size: 48rpx;"></text></view>
				</view>
			</view>
		</uni-popup> -->
<!-- 分享弹窗 -->
	<fu-share ref="share" :is_showPoter='false' :info="shareInfo" @getPosterInfo="getShareCode"></fu-share>
		<!-- 网络监测 -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	import { SHAREURL } from '@/common/config.js';
	// #ifdef MP-WEIXIN
	// const plugin = requirePlugin('WechatSI');
	// const manager = plugin.getRecordRecognitionManager();
	// #endif
	export default {
		data() {
			return {
				keyword: '', // {String} 搜索关键字
				history_list: [], // {Array.Object} 历史记录表
				removeIndex: -1, // 要删除的下标
				words: [], // {Array.Object} 搜索联想分词表
				placeholder: '搜索你想要的商品', // {String} 搜索框提示文字
				listenerType: 'listener', // {String} 是否识别成功 listener success fail
				listenerWord: '', // {String} 语音识别的文字
				keyboardheight: 0, // {Number} 键盘高度
				findData: [], // {Array.Object} 搜索发现数据
				search_found: [], // {Array.Object} 输入发现
				hotSerchList: [], // {Array.Object} 热搜榜数据
				themeColor:'#B82441'
			};
		},
		onShow() {
			this.initHistory();
			this.words = [];
			this.removeIndex = -1;
		},
		computed: {
		  shareInfo() {
			  console.log(global.userInfo)
		    return {		    
		      goodsName: '热销榜单',
		      goodsImage: '',
		      thumb: '',
		      summary: '热销榜单',
		      price: '',
		      market_price: '',
		      avatar: (global.userInfo && global.userInfo.head_img) || '',
		      name: (global.userInfo && global.userInfo.user_name) || '',
		      href: this.shareUrl || SHAREURL +
		        `pages/register/index?phone=${ global.userInfo &&global.userInfo._mobile || 0}&invite_code=${ global.userInfo &&global.userInfo.invite_code}`, // H5地址
		      code: this.shareCode // 二维码
		    };
		  },
		},
		onLoad(options) {
			const {
				name
			} = options;
			if (name) {
				this.placeholder = name != 'undefined' ? name : '搜索你想要的商品';
			}
			this.getFindData();
			this.getSearchFound();
			this.hotSearch();
			// #ifdef MP-WEIXIN
			// manager.onStop = res => {
			// 	console.log('录音结束', res);
			// 	if (res.result) {
			// 		const reg = /[\u4e00-\u9fa5]/g;
			// 		const word = res.result.match(reg).join('');
			// 		this.listenerWord = word;
			// 		this.listenerType = 'success';
			// 		this.keyword = word;
			// 		setTimeout(() => {
			// 			this.closeVoicePop();
			// 		}, 100);
			// 		setTimeout(() => {
			// 			this.handleSearch();
			// 		}, 300);
			// 	} else {
			// 		this.listenerType = 'fail';
			// 	}
			// };
			// manager.onStart = res => {
			// 	console.log('录音开始', res);
			// };
			// manager.onError = res => {
			// 	console.log('录音管理器报错', res);
			// 	this.listenerType = 'fail';
			// };
			// #endif
		},
		onReady() {
			uni.onKeyboardHeightChange(res => {
				this.keyboardheight = res.height;
			});
		},
		methods: {
			/**
			 * @event
			 * @description 清除历史记录弹窗
			 */
			clearHistory() {
				this.$util.showModal({
					title: '提示',
					content: '确定删除历史记录？',
					confirmColor: '#FF6F27',
					success: res => {
						if (res.confirm) {
							this.clearAllHistory();
						}
					}
				});
			},
			// 清除历史记录
			clearAllHistory() {
				this.history_list = [];
				uni.clearStorageSync('SEARCHHISTORY');
			},
			// 长按事件
			handleLongpress(index) {
				this.removeIndex = index;
			},
			removeHistory(keyword) {
				this.history_list = this.history_list.filter(ele => ele != keyword);
				uni.setStorageSync('SEARCHHISTORY', this.history_list);
			},
			// 初始化历史记录
			initHistory() {
				let _data = uni.getStorageSync('SEARCHHISTORY');
				if (_data) {
					this.history_list = _data;
				}
			},

			/**
			 * @event
			 * @description 搜索发现的换一批功能
			 */
			changeSweetGril() {
				this.$util.debounce(() => {
					this.getSearchFound();
				}, 300);
			},
			/**
			 * @event
			 * @description 去榜单页面
			 */
			goHotList() {
				uni.navigateTo({
					url: '/pages/index/search/hot-list/index'
				});
			},
			openPop() {
				this.$refs.share.open();
			},
			/**
			 * @function
			 * @description 热搜榜数据
			 * @property {Object} data - 请求接口携带的数据
			 */
			hotSearch() {
				const data = {};
				this.$api.post(global.apiUrls.potGetHotSearch,{
					is_hot_serach: 1
				}).then(res => {
					if (res.data.code == 1) {
						this.hotSerchList = res.data.data.data;
					}
				});
			},
			/**
			 * @event
			 * @description 监听用户输入信息
			 * @param {Object} e - 原生事件信息
			 * @param {String} text - 输入的文字
			 */
			handleInput(e, text) {
				let txt = (e && e.detail.value.trim()) || text;
				if (txt) {
					this.$util.throttle(() => {
						this.$api
							.get(global.apiUrls.getGoodsGetGoodsList, {
								keyword: txt
							})
							.then(res => {
								if (res.statusCode == 200 && res.data.code == 1) {
									let list = res.data.data.data;
									this.words = list;
								}
							})
							.catch(err => {
								console.log(err);
							});
					});
				} else {
					this.words = [];
				}
			},
			/**
			 * @function
			 * @description 获取热搜榜数据
			 */
			getFindData() {
				this.$api
					.post(global.apiUrls.postSearchHot)
					.then(res => {
						if (res.data.code == 1) {
							this.findData = res.data.data;
						}
					})
					.catch(err => {
						console.log('hot list err: ', err);
					});
			},
			/**
			 * @function
			 * @description 搜索发现
			 */
			getSearchFound() {
				this.$api
					.post(global.apiUrls.postSearchHistoryRecommend)
					.then(res => {
						if (res.data.code == 1) {
							this.search_found = res.data.data;
						}
					})
					.catch(err => {
						console.log('err: ' + JSON.stringify(err));
					});
			},
			/**
			 * @event
			 * @description 扫码识别商品
			 */
			hanldeScode() {
				const that = this;
				uni.scanCode({
					scanType: ['barCode'],
					success: function(response) {
						that.$api
							.post(global.apiUrls.postSearchScanCode, {
								sn: response.result
							})
							.then(res => {
								if (res.data.code == 1 && res.data.data.list.length > 0) {
									that.$urouter.navigateTo({
										url: '/pages/goods/goodsdetail/goods-detail/index',
										params: {
											goods_id: res.data.data.list[0].id,
											sku_id: res.data.data.list[0].sku_id || 0
										}
									});
								} else {
									this.$message.info({
										content: '暂无相关数据'
									});
								}
							})
							.catch(err => {
								this.$message.info({
									content: '暂无相关数据'
								});
								console.log('err: ' + JSON.stringify(err));
							});
					}
				});
			},

			/**
			 * @event
			 * @description 去搜索
			 * @param {Object} e - 原生事件
			 * @param {Object} item - 搜索信息
			 */
			handleSearch(e, item, index) {
				uni.hideKeyboard();
				this.keyboardheight = 0;
				if (item) {
					if (this.removeIndex == index) {
						this.removeHistory(item, item);
						this.removeIndex = -1;
						return false;
					}
					// 点击历史记录去搜索
					this.$urouter.navigateTo({
						url: '/pages/goods/goods-list/index',
						params: {
							keyWords: item
						}
					});
				} else {
					// 搜索按钮或语音搜索
					if (this.keyword.trim() != '') {
						// 输入框触发搜索
						this.$urouter.navigateTo({
							url: '/pages/goods/goods-list/index',
							params: {
								keyWords: this.keyword
							}
						});
					} else if (this.placeholder != '搜索你想要的商品') {
						// 首页带过来的数据触发搜索
						this.$urouter.navigateTo({
							url: '/pages/goods/goods-list/index',
							params: {
								keyWords: this.placeholder
							}
						});
					} else {
						this.$message.info('请输入搜索关键字');
					}
				}
			},
			/**
			 * @event
			 * @description 去详情页
			 * @param {Object} item - 榜单信息
			 */
			toDetail(item) {
				uni.hideKeyboard();
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-detail/index',
					params: {
						goods_id: item.id,
						sku_id: item.sku_id || 0
					}
				});
			},
			/**
			 * @event
			 * @description 去分类页面  搜索发现点击
			 * @param {Object} item - 榜单信息
			 */
			toClassify(item) {
				this.keyword = item;
				this.handleSearch();
			},
			/**
			 * @event
			 * @description 后退上一个页面
			 */
			back() {
				uni.navigateBack();
			},
			/**
			 * @event
			 * @description 打开语音识别弹窗
			 */
			openVoicePop() {
				// #ifdef MP-WEIXIN
				this.listenerType = 'listener';
				this.listenerWord = '';
				this.$refs.voice.open();
				this.startRecord();
				// #endif
				// #ifdef APP-PLUS
				let options = {
					engine: 'iFly',
					punctuation: false,
					timeout: 3000
				};
				plus.speech.startRecognize(
					options,
					res => {
						console.log('识别成功', res);
						if (res) {
							this.keyword = res;
							setTimeout(() => {
								this.handleSearch(res);
							}, 300);
						} else {
							this.$message.info('未检测到语音哦~');
						}
					},
					err => {
						console.log('识别失败', err);
					}
				);
				// #endif
			},
			/**
			 * @event
			 * @description 清除输入框
			 */
			clear() {
				this.keyword = '';
				this.words = [];
			},
			// // 关闭语音识别弹窗
			// closeVoicePop() {
			// 	this.$refs.voice.close();
			// },
			// 开始录音
			// startRecord() {
			// 	manager.start({
			// 		duration: 3000,
			// 		lang: 'zh_CN'
			// 	});
			// }
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;

		.history-tag {
			max-width: 710rpx;
			position: relative;

			.close {
				position: absolute;
				top: 50%;
				right: 10rpx;
				transform: translateY(-50%);
				font-size: 20rpx;
			}

			.fu-search-pic {
				position: absolute;
				right: -10rpx;
				top: -8rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	// 标签样式
	@keyframes one {
		0% {
			transform: rotate(5deg);
		}

		12% {
			transform: rotate(-5deg);
		}

		25% {
			transform: rotate(5deg);
		}

		38% {
			transform: rotate(-5deg);
		}

		50% {
			transform: rotate(5deg);
		}

		62% {
			transform: rotate(-5deg);
		}

		78% {
			transform: rotate(5deg) scale(0.8);
		}

		100% {
			transform: rotate(-5deg) scale(1);
		}
	}

	@keyframes two {
		0% {
			opacity: 0
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.find_list {
		margin-top: 20rpx;
		padding: 20rpx 0;
		background: #fff;
		border-radius: 30rpx;
		box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
		min-height: 680rpx;

		.overflow-one {
			width: 100%;
			text-align: left;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 0;
			padding-right: 20rpx;
			overflow: hidden;

			.fu-hot-name {
				width: 465rpx;

				.fu-hot-main {
					max-width: 415rpx;
				}

				.fu-goods-tag {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;

					&.one {
						animation: one 1.5s infinite;
					}

					&.two {
						animation: two 1s infinite;
					}
				}

				.fu-hot-tag {
					margin-left: 10rpx;
					width: 40rpx;
				}
			}

			.top_num {
				display: inline-block;
				width: 38rpx;
				height: 41rpx;
				font-size: 28rpx;
				font-weight: bold;
				// font-style: italic;
				text-align: center;
				color: #333333;
				margin: 0 20rpx;
				background-size: 100%;
				background-repeat: no-repeat;
			}

			.top_0 {
				background-image: url($IMG_BASE_URL + 'index/three-1.png');
			}

			.top_1 {
				background-image: url($IMG_BASE_URL + 'index/three-2.png');
			}

			.top_2 {
				background-image: url($IMG_BASE_URL + 'index/three-3.png');
			}

			.top_0,
			.top_1,
			.top_2 {
				color: rgba(255, 255, 255, 0);
			}

			.name {
				display: inline-block;
				max-width: 520rpx;
			}

			.icon {
				display: inline-block;
				margin-left: 10rpx;
			}

			.icon_new {
				width: 55rpx;
				height: 30rpx;
				min-width: 55rpx;
				min-height: 30rpx;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
			}

			.icon_hot {
				display: flex;
				align-items: center;
				height: 40rpx;
				min-height: 40rpx;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;

				.fu-up-pic {
					width: 12rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}

				.fu-up-sum {
					color: #ff6464;
				}
			}
		}
	}

	.bottom-fixed {
		height: 90rpx;
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 10rpx;
		background: #fff;

		.action-button {
			width: auto;
			height: 60rpx;
			border: none;
			border-radius: 60rpx;
			background-color: #fff;
			box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
			color: #333;
			font-size: 26rpx;
			margin-top: 15rpx;
			padding: 0 32rpx;

			text {
				margin-right: 30rpx;
				font-size: 38rpx;
				color: #333;
			}
		}
	}

	.action-button {
		width: 80rpx;
		height: 80rpx;
		background-color: #ffffff;
		border: 4rpx solid $theme;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hr {
		display: inline-block;
		background: $bgtheme;
		width: 4rpx;
		float: right;
		animation: liner 1s ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}

	.hr+.hr {
		margin-left: 20rpx;
	}

	.hr1 {
		height: 14rpx;
		animation-delay: -1.6s;
	}

	.hr2 {
		height: 36rpx;
		animation-delay: -1.8s;
	}

	.hr3 {
		height: 26rpx;
		animation-delay: -1.2s;
	}

	.hr4 {
		height: 20rpx;
		animation-delay: -2s;
	}

	.hr5 {
		height: 34rpx;
		animation-delay: -1.9s;
	}

	.hr6 {
		height: 12rpx;
		animation-delay: -2s;
	}

	.hr7 {
		height: 10rpx;
		animation-delay: -1.8s;
	}

	.hr8 {
		height: 14rpx;
		animation-delay: -1.3s;
	}

	.hr9 {
		height: 32rpx;
		animation-delay: -2s;
	}

	.hr10 {
		height: 18rpx;
		animation-delay: -2s;
	}

	.hr11 {
		height: 24rpx;
		animation-delay: -1.1s;
	}

	.hr12 {
		height: 12rpx;
		animation-delay: -1.3s;
	}

	.hr13 {
		height: 14rpx;
		animation-delay: -1.4s;
	}

	.hr14 {
		height: 32rpx;
		animation-delay: -1.3s;
	}

	.hr15 {
		height: 30rpx;
		animation-delay: -2s;
	}

	@keyframes liner {
		0% {
			transform: scaleY(1);
		}

		25% {
			transform: scaleY(2);
		}

		50% {
			transform: scaleY(1);
		}

		75% {
			transform: scaleY(2);
		}

		100% {
			transform: scaleY(1);
		}
	}
</style>
